<template>
    <div id="echarts">
        <div ref="chart" class="mychart" />
    </div>
</template>
<script>
    export default {
        data() {
            return {
                showTime: [],
                showValue: [],
                timer: undefined
            }
        },
        created() {
            this.showTime = [
                '20:00',
                '20:15',
                '20:30',
                '20:45',
                '21:00',
                '21:15',
                '21:30',
                '21:45',
                '22:00',
                '22:15',
                '22:30',
                '22:45',
                '23:00',
                '23:15',
                '23:30',
                '23:45',
                '00:00',
                '00:15',
                '00:30',
                '00:45',
                '01:00',
                '01:15',
                '01:30',
                '01:45',
                '02:00',
                '02:15',
                '02:30',
                '02:45',
                '03:00',
                '03:15',
                '03:30',
                '03:45',
                '04:00',
                '04:15',
                '04:30',
                '04:45',
                '05:00',
                '05:15',
                '05:30',
                '05:45',
                '06:00',
                '06:15',
                '06:30',
                '06:45',
                '07:00',
                '07:15',
                '07:30',
                '07:45',
                '08:00'
            ]
            this.showValue = [1]
            this.$nextTick(() => {
                var showOption = {
                    xAxis: {
                        type: 'category',
                        data: this.showTime,
                        axixLine: {
                            show: true,
                            lineStyle: {
                                color: "#FFFFFF"
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#FFFFFF",
                                fontSize: 16
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axixLine: {
                            show: true,
                            lineStyle: {
                                color: "#FFFFFF",
                                wdith: 5,
                                type: "solid"
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#FFFFFF",
                                fontSize: 16
                            }
                        },
                    },
                    series: [
                        {
                            data: this.showValue,
                            type: 'line',
                            symbolSize: 10,
                            lineStyle: {
                                color: '#FFFFFF',
                                width: 4
                            }
                        }
                    ]
                }
                const dom = this.$refs.chart;
                const Echart1 = this.$echarts.init(dom);
                Echart1.setOption(showOption);
                this.timer = setInterval(() => {
                    if (this.showValue.length < 48) {
                        this.showValue.push(Math.floor(Math.random()*10))
                    }
                    Echart1.setOption({
                        xAxis: {
                            type: 'category',
                            data: this.showTime,
                            axixLine: {
                                show: true,
                                lineStyle: {
                                    color: "#FFFFFF"
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#FFFFFF",
                                    fontSize: 16
                                }
                            },
                        },
                        yAxis: {
                            type: 'value',
                            axixLine: {
                                show: true,
                                lineStyle: {
                                    color: "#FFFFFF",
                                    wdith: 5,
                                    type: "solid"
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#FFFFFF",
                                    fontSize: 16
                                }
                            },
                        },
                        series: [
                            {
                                data: this.showValue,
                                type: 'line',
                                symbolSize: 10,
                                lineStyle: {
                                    color: '#FFFFFF',
                                    width: 4
                                }
                            }
                        ]
                    });
                }, 1000)
            });
        },
        beforeDestroy() {
            this.timer = undefined
        }
    };
</script>
<style lang="less" scoped>
.mychart {
  height: 600px;
  width: 100%;
  background: rgb(116, 231, 216) !important;
}
</style>